<template>
    <!-- 商品-商品分类 -->
    <div class="article-manager">
        <Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
            <div class="new_card_pd">
                <!-- 筛选条件 -->
                <Form ref="artFrom" :model="artFrom" :label-width="labelWidth" inline :label-position="labelPosition"
                    @submit.native.prevent>
                    <FormItem label="商品分类：" prop="pid" label-for="pid">
                        <Select v-model="artFrom.id" @on-change="userSearchs" clearable class="input-add">
                            <Option v-for="item in treeSelect" :value="item.id" :key="item.id">{{ item.cate_name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="状态：" label-for="is_show">
                        <Select v-model="artFrom.is_show" placeholder="请选择" clearable @on-change="userSearchs"
                            class="input-add">
                            <Option value="1">显示</Option>
                            <Option value="0">隐藏</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="分类名称：" label-for="status2">
                        <Input placeholder="请输入" v-model="artFrom.cate_name" class="input-add mr14" />
                        <Button type="primary" @click="userSearchs()">查询</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <!-- 相关操作 -->
            <div>
                <Button v-auth="['product-save-cate']" type="primary" class="bnt" @click="addClass">添加分类</Button>
            </div>
            <!-- 商品分类表格 -->
            <vxe-table :data="tableData" ref="xTable" class="ivu-mt" highlight-hover-row :loading="loading"
                header-row-class-name="false" row-id="id"
                :tree-config="{ lazy: true, children: 'children', hasChild: 'children', loadMethod: loadChildrenMethod, reserve: true }">
                <vxe-table-column field="id" title="ID" tooltip width="80"></vxe-table-column>
                <vxe-table-column field="cate_name" tree-node title="分类名称" min-width="250"></vxe-table-column>
                <vxe-table-column field="pic" title="分类图标" min-width="100">
                    <template v-slot="{ row }">
                        <viewer>
                            <div class="tabBox_img">
                                <img v-lazy="row.pic">
                            </div>
                        </viewer>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="sort" title="排序" min-width="100" tooltip="true"></vxe-table-column>
                <vxe-table-column field="is_show" title="状态" min-width="120">
                    <template v-slot="{ row }">
                        <i-switch v-model="row.is_show" :value="row.is_show" :true-value="1" :false-value="0"
                            @on-change="onchangeIsShow(row)" size="large">
                            <span slot="open">显示</span>
                            <span slot="close">隐藏</span>
                        </i-switch>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="app_show" title="APP" min-width="120">
                    <template v-slot="{ row }">
                        <i-switch v-model="row.app_show" :value="row.app_show" :true-value="1" :false-value="0"
                            @on-change="TypeIsShow(row, 'app_show')" size="large">
                            <span slot="open">显示</span>
                            <span slot="close">隐藏</span>
                        </i-switch>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="h5_show" title="H5" min-width="120">
                    <template v-slot="{ row }">
                        <i-switch v-model="row.h5_show" :value="row.h5_show" :true-value="1" :false-value="0"
                            @on-change="TypeIsShow(row, 'h5_show')" size="large">
                            <span slot="open">显示</span>
                            <span slot="close">隐藏</span>
                        </i-switch>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="routine_show" title="小程序" min-width="120">
                    <template v-slot="{ row }">
                        <i-switch v-model="row.routine_show" :value="row.routine_show" :true-value="1" :false-value="0"
                            @on-change="TypeIsShow(row, 'routine_show')" size="large">
                            <span slot="open">显示</span>
                            <span slot="close">隐藏</span>
                        </i-switch>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="date" title="操作" width="250" align="left">
                    <template v-slot="{ row, index }">
                        <a @click="edit(row)">编辑</a>
                        <Divider type="vertical" />
                        <a @click="del(row, '删除商品分类', index)">删除</a>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <!--            <div class="acea-row row-right page" v-if="total">-->
            <!--                <Page :total="total" :current="artFrom.page" show-elevator show-total @on-change="pageChange"-->
            <!--                      :page-size="artFrom.limit"/>-->
            <!--            </div>-->
        </Card>
        <!-- 添加 编辑表单-->
        <edit-from ref="edits" :FromData="FromData" @submitFail="userSearchs"></edit-from>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { productListApi, productCreateApi, productEditApi, setShowApi, treeListApi, setTypeShowApi2 } from '@/api/product';
import editFrom from '../../../components/from/from';
export default {
    name: 'product_productClassify',
    components: {
        editFrom
    },
    data() {
        return {
            treeSelect: [],
            FromData: null,
            grid: {
                xl: 7,
                lg: 7,
                md: 12,
                sm: 24,
                xs: 24
            },
            loading: false,
            artFrom: {
                pid: 0,
                is_show: '',
                page: 1,
                cate_name: '',
                limit: 15,
                id: 0
            },
            total: 0,
            tableData: []
        }
    },
    computed: {
        ...mapState('admin/layout', [
            'isMobile'
        ]),
        ...mapState('admin/userLevel', [
            'categoryId'
        ]),
        labelWidth() {
            return this.isMobile ? undefined : 96;
        },
        labelPosition() {
            return this.isMobile ? 'top' : 'right';
        }
    },
    mounted() {
        this.goodsCategory();
        this.getList();
    },
    methods: {
        // 商品分类；
        goodsCategory() {
            treeListApi(0).then(res => {
                this.treeSelect = res.data;
            }).catch(res => {
                this.$Message.error(res.msg);
            })
        },
        // 列表
        getList() {
            this.loading = true;
            this.artFrom.is_show = this.artFrom.is_show || '';
            productListApi(this.artFrom).then(async res => {
                let data = res.data
                this.tableData = data.list;
                this.total = data.count;
                this.loading = false;
            }).catch(res => {
                this.loading = false;
                this.$Message.error(res.msg);
            })
        },
        loadChildrenMethod({ row }) {
            return new Promise((resolve, reject) => {
                productListApi({ pid: row.id }).then(res => {
                    let arr = res.data.list;
                    resolve(arr);
                })
            })
        },
        pageChange(index) {
            this.artFrom.page = index;
            this.getList();
        },
        // 添加
        addClass() {
            this.$modalForm(productCreateApi()).then(() => {
                this.artFrom.pid = 0;
                this.getList();
                this.goodsCategory();
            }
            );
        },
        // 编辑
        edit(row) {
            this.$modalForm(productEditApi(row.id)).then(() => {
                this.artFrom.pid = 0;
                this.getList();
                this.goodsCategory();
                //this.findSupId(this.tableData,row.id,res);
            });
        },
        findSupId(data, supplierId, res) {
            var fun = function (i, n) {
                if (i && i.length > 0) {
                    for (let v in i) {
                        if (i[v].id == n) {
                            i[v].cate_name = res.data.cate_name
                            i[v].is_show = res.data.is_show
                            i[v].sort = res.data.sort
                            i[v].pic = res.data.pic
                            return
                        } else {
                            if (i[v].children && i[v].children.length > 0) {
                                fun(i[v].children, n)
                            }
                        }
                    }
                }
            }
            fun(data, supplierId);
        },

        // 修改状态
        onchangeIsShow(row) {
        //    console.log(row)
            let data = {
                id: row.id,
                is_show: row.is_show
            }
            setShowApi(data).then(async res => {
                this.$Message.success(res.msg);
                this.artFrom.pid = 0;
                this.getList()
            }).catch(res => {
                this.$Message.error(res.msg);
            })
        },
        // 在app h5 小程序中显示
        TypeIsShow(zz, Type) {
            let obj = {
                    h5_show: zz.h5_show,
                    routine_show: zz.routine_show,
                    app_show: zz.app_show,
            };
            let data = {};
            data.id = zz.id;
            data.type = Type;
            data.is_show = obj[Type];
            setTypeShowApi2(data).then( res => {
                if(res.status == 200){
                    this.$Message.success(res.msg);
                    this.getList()
                }
            }).catch(res => {
                this.$Message.error(res.msg);
            })
        },
        // 下拉树
        handleCheckChange(data) {
            let value = ''
            let title = ''
            this.list = []
            this.artFrom.pid = 0;
            data.forEach((item, index) => {
                value += `${item.id},`
                title += `${item.title},`
            });
            value = value.substring(0, value.length - 1)
            title = title.substring(0, title.length - 1)
            this.list.push({
                value,
                title
            });
            this.artFrom.pid = value;
            this.getList();
        },
        // 删除
        del(row, tit, num) {
            let delfromData = {
                title: tit,
                num: num,
                url: `product/category/${row.id}`,
                method: 'DELETE',
                ids: ''
            };
            this.$modalSure(delfromData).then((res) => {
                this.$Message.success(res.msg);
                this.artFrom.pid = 0;
                this.getList();
                this.goodsCategory();
            }).catch(res => {
                this.$Message.error(res.msg);
            });
        },
        // 表格搜索
        userSearchs() {
            this.artFrom.pid = 0;
            this.artFrom.page = 1;
            this.getList();
        }
    }
}
</script>
<style scoped lang="stylus">
    .treeSel >>>.ivu-select-dropdown-list
        padding 0 10px!important
        box-sizing border-box
    .tabBox_img
        width 36px
        height 36px
        border-radius:4px
        cursor pointer
        img
            width 100%
            height 100%
    /deep/.ivu-input
        font-size 14px !important
</style>

